<script setup>
import { ref, onMounted } from 'vue'
import {
	getNavBarHeight,
} from '@/utils/system.js'
// 数据定义
const currentTab = ref('nearby')
const title = ref('首页')

// 附近动态列表
const nearbyPosts = ref([
	{
		image: '/static/images/snow.jpg',
		distance: '1.5',
		title: '#骑行日记# VLOG今日骑行日记、二刷长安街',
		avatar: '/static/images/avatar.jpg',
		likes: 1020
	},
	{
		image: '/static/images/snow.jpg',
		distance: '1.7',
		title: '#30天搞定一门乐器# 大提琴学成的达拉崩吧',
		avatar: '/static/images/avatar.jpg',
		likes: 2020
	},
	{
		image: '/static/images/snow.jpg',
		distance: '1.9',
		title: '#30天搞定一门乐器# 大提琴新的尝试',
		avatar: '/static/images/avatar.jpg',
		likes: 1580
	},
	{
		image: '/static/images/snow.jpg',
		distance: '2.6',
		title: '音乐练习日记',
		avatar: '/static/images/avatar.jpg',
		likes: 960
	},
	{
		image: '/static/images/snow.jpg',
		distance: '1.7',
		title: '#30天搞定一门乐器# 大提琴学成的达拉崩吧',
		avatar: '/static/images/avatar.jpg',
		likes: 2020
	},
	{
		image: '/static/images/snow.jpg',
		distance: '1.9',
		title: '#30天搞定一门乐器# 大提琴新的尝试',
		avatar: '/static/images/avatar.jpg',
		likes: 1580
	},
	{
		image: '/static/images/snow.jpg',
		distance: '2.6',
		title: '音乐练习日记',
		avatar: '/static/images/avatar.jpg',
		likes: 960
	}
])

// 关注列表
const posts = ref([
	{
		username: '朱教授-ZAKA',
		avatar: '/static/images/avatar.jpg',
		image: '/static/images/snow.jpg',
		description: '#2022初雪#郑州的清晨',
		commentCount: 228
	}
])

// 热门用户列表
const hotUsers = ref([
	{
		name: '呢- Gala',
		avatar: '/static/images/avatar.jpg',
		followCount: '5040'
	},
	{
		name: 'KAANLIY',
		avatar: '/static/images/avatar.jpg',
		followCount: '3040'
	}
])

// 推荐列表
const recommendPosts = ref([
	{
		username: '古力咚- FANNNY',
		avatar: '/static/images/avatar.jpg',
		image: '/static/images/snow.jpg',
		time: '2021.7.14 19:32'
	},
	{
		username: 'WE ARE LANG',
		avatar: '/static/images/avatar.jpg',
		image: '/static/images/snow.jpg',
		time: '2021.7.14 19:32'
	}
])


// 处理授权和登录流程
const handleAuth = () => {
	// 检查是否已登录
	if (checkIsLoggedIn()) {
		console.log('用户已登录')
		return
	}

	// 获取授权设置
	uni.getSetting({
		success: (res) => {
			if (res.authSetting['scope.userInfo']) {
				// 已经授权，直接调用头像昵称填写
				wx.getUserProfile({
					desc: '用于完善用户资料',
					success: (res) => {
						handleLogin(res.userInfo)
					},
					fail: (err) => {
						console.error('获取用户信息失败：', err)
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						})
					}
				})
			} else if (res.authSetting['scope.userInfo'] === false) {
				// 用户已拒绝授权
				uni.showModal({
					title: '提示',
					content: '您已拒绝授权，无法使用小程序功能',
					showCancel: false,
					success: () => {
						// 退出小程序
						uni.exitMiniProgram()
					}
				})
			} else {
				// 首次进入，显示授权弹窗
				uni.showModal({
					title: '授权提示',
					content: '请授权使用您的微信头像和昵称',
					success: (res) => {
						if (res.confirm) {
							wx.getUserProfile({
								desc: '用于完善用户资料',
								success: (res) => {
									handleLogin(res.userInfo)
								},
								fail: (err) => {
									console.error('获取用户信息失败：', err)
									uni.showToast({
										title: '获取用户信息失败',
										icon: 'none'
									})
								}
							})
						} else {
							// 用户点击取消
							uni.showModal({
								title: '提示',
								content: '您已拒绝授权，无法使用小程序功能',
								showCancel: false,
								success: () => {
									// 退出小程序
									uni.exitMiniProgram()
								}
							})
						}
					}
				})
			}
		},
		fail: (err) => {
			console.error('获取授权设置失败：', err)
			uni.showToast({
				title: '系统错误',
				icon: 'none'
			})
		}
	})
}





// 方法定义
const switchTab = (tab) => {
	currentTab.value = tab
}

const handleFollow = (index) => {
	console.log('关注用户:', index)
}


</script>

<template>
	<view class="Layout">

		
		<!-- 导航栏 -->
		<custom-nav-bar :title="title" />
		
		<!-- 固定的tabs导航 -->
		<view class="tabs-container" :style="{ top: getNavBarHeight() + 'px' }">
			<view class="nav-tabs">
				<text class="tab-item" :class="{ active: currentTab === 'nearby' }" @tap="switchTab('nearby')">附近</text>
				<text class="tab-item" :class="{ active: currentTab === 'follow' }" @tap="switchTab('follow')">关注</text>
				<text class="tab-item" :class="{ active: currentTab === 'recommend' }" @tap="switchTab('recommend')">推荐</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view 
			class="content" 
			scroll-y
			:style="{ 
				paddingTop: '88rpx',
				marginTop: getNavBarHeight + 'px'
			}"
		>
			<!-- 附近内容 -->
			<view v-if="currentTab === 'nearby'" class="nearby-list">
				<view class="nearby-grid">
					<view class="nearby-item" v-for="(item, index) in nearbyPosts" :key="index">
						<view class="nearby-image-container">
							<image class="nearby-image" :src="item.image" mode="aspectFill"></image>
							<text class="nearby-distance">{{item.distance}}km</text>
						</view>
						<view class="nearby-info">
							<view class="nearby-desc">
								<text class="nearby-title">{{item.title}}</text>
								<view class="user-brief">
									<image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
									<text class="like-count">{{item.likes}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 关注内容 -->
			<view v-if="currentTab === 'follow'" class="post-list">
				<view class="post-item" v-for="(item, index) in posts" :key="index">
					<view class="post-header">
						<view class="user-info">
							<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
							<text class="username">{{ item.username }}</text>
						</view>
						<button class="follow-btn" @tap="handleFollow(index)">关注</button>
					</view>
					<image class="post-image" :src="item.image" mode="aspectFill"></image>
					<view class="post-footer">
						<view class="post-actions">
							<view class="action-item">
								<image class="action-icon" src="/static/icons/like.png" mode="aspectFit"></image>
							</view>
							<view class="action-item">
								<image class="action-icon" src="/static/icons/comment.png" mode="aspectFit"></image>
							</view>
							<view class="action-item">
								<image class="action-icon" src="/static/icons/share.png" mode="aspectFit"></image>
							</view>
						</view>
						<text class="post-desc">{{ item.description }}</text>
						<text class="comment-count">共{{ item.commentCount }}条评论</text>
					</view>
				</view>
			</view>

			<!-- 推荐内容 -->
			<view v-if="currentTab === 'recommend'" class="recommend-list">
				<!-- 热门推荐用户 -->
				<view class="hot-recommend">
					<text class="section-title">热门推荐</text>
					<scroll-view class="user-scroll" scroll-x>
						<view class="user-card" v-for="(user, index) in hotUsers" :key="index">
							<image class="user-avatar" :src="user.avatar" mode="aspectFill"></image>
							<text class="user-name">{{user.name}}</text>
							<text class="follow-count">{{user.followCount}}关注</text>
						</view>
					</scroll-view>
				</view>

				<!-- 推荐帖子列表 -->
				<view class="post-list">
					<view class="post-item" v-for="(item, index) in recommendPosts" :key="index">
						<view class="post-header">
							<view class="user-info">
								<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
								<view class="user-meta">
									<text class="username">{{item.username}}</text>
									<text class="post-time">{{item.time}}</text>
								</view>
							</view>
							<button class="follow-btn" @tap="handleFollow(index)">关注</button>
						</view>
						<image class="post-image" :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>



<style lang="scss" scoped>

.Layout {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.nav-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
}

.nav-tabs {
	display: flex;
	gap: 40rpx;
}

.tab-item {
	font-size: 32rpx;
	color: #666;
	padding: 10rpx 0;
}

.tab-item.active {
	color: #333;
	font-weight: bold;
}

.nav-right {
	display: flex;
	gap: 20rpx;
}

.icon {
	width: 40rpx;
	height: 40rpx;
}

.content {
	flex: 1;
	background-color: #f5f5f5;
	position: relative;
	margin-top: var(--custom-nav-height); 
}

.post-list {
	padding: 20rpx;
}

.post-item {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.post-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.username {
	font-size: 28rpx;
	font-weight: bold;
}

.follow-btn {
	font-size: 24rpx;
	padding: 8rpx 24rpx;
	background-color: #007AFF;
	color: #fff;
	border-radius: 30rpx;
	border: none;
}

.post-image {
	width: 100%;
	height: 500rpx;
}

.post-footer {
	padding: 20rpx;
}

.post-actions {
	display: flex;
	gap: 30rpx;
	margin-bottom: 20rpx;
}

.action-icon {
	width: 44rpx;
	height: 44rpx;
}

.post-desc {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.comment-count {
	font-size: 24rpx;
	color: #999;
}

.tabs-container {
	position: fixed;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
	z-index: 99;
}

.nav-tabs {
	display: flex;
	justify-content: center;
	gap: 60rpx;
}

.tab-item {
	font-size: 32rpx;
	color: #666;
	padding: 10rpx 0;
	position: relative;
}

.tab-item.active {
	color: #333;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: -10rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #333;
	border-radius: 2rpx;
}

.nearby-list {
	padding: 20rpx;
}

.nearby-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.nearby-item {
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	position: relative;
}

.nearby-image-container {
	position: relative;
	width: 100%;
}

.nearby-image {
	width: 100%;
	height: 400rpx;
	display: block;
}

.nearby-distance {
	position: absolute;
	top: 16rpx;
	right: 16rpx;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	z-index: 1;
}

.nearby-info {
	padding: 16rpx;
}

.nearby-desc {
	padding-top: 10rpx;
}

.nearby-title {
	font-size: 26rpx;
	color: #333;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.user-brief {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
	gap: 10rpx;
}

.user-avatar {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
}

.like-count {
	font-size: 24rpx;
	color: #666;
}

/* 添加推荐页相关样式 */
.recommend-list {
	background: #f5f5f5;
}

.hot-recommend {
	background: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.user-scroll {
	white-space: nowrap;
}

.user-card {
	display: inline-block;
	width: 200rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-right: 20rpx;
	text-align: center;
}

.user-card .user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-bottom: 12rpx;
}

.user-card .user-name {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.user-card .follow-count {
	font-size: 24rpx;
	color: #999;
	display: block;
}

.user-meta {
	display: flex;
	flex-direction: column;
}

.post-time {
	font-size: 24rpx;
	color: #999;
	margin-top: 4rpx;
}


</style>